<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>购买节点-获取游戏</title>
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
    <style rel="stylesheet" type="text/css">
      #gamelistbox {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
      }
    </style>
  </head>
  <body class="pear-container">
    <div class="layui-card">
      <div class="layui-card-body">
        <div class="games" id="gamelistbox"></div>
      </div>
    </div>
    <script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
    <script src="/app/admin/component/pear/pear.js"></script>
    <script src="/app/admin/admin/js/common.js"></script>
    <script src="/app/admin/admin/js/buynodes_games.js"></script>

    <script type="text/javascript">
      const params = new URL(location.href).searchParams
      const LETTER = params.get('letter')

      // 发送消息给父级
      const sendMessage = (method, data) => {
        window.parent.postMessage(
          {
            method,
            data,
            from: LETTER,
          },
          '*'
        )
      }

      const GET_API = '/app/admin/v1-game/get'

      // 模拟数据
      let GAMEList = []

      layui.use(function () {
        let $ = layui.$
        let util = layui.util
        let element = layui.element

        // $('body .test').text(LETTER) // Test letter A-Z

        // 当前页面查询接口
        const __search__ = (keywords) => {
          let objs = {}

          if (typeof keywords === 'object') {
            objs = keywords
          } else {
            objs = {
              letter: LETTER,
            }
          }

          hangleFetchGameList(objs, renderGamesElement)
        }

        __search__()

        // window.postMessage
        // 接收父级传递的消息
        window.addEventListener('message', (event) => {
          // 需要判断是否A-Z; 或者是搜索
          const data = event.data
          // console.log(data)

          switch (data.method) {
            case 'search':
              __search__({
                name: data.data,
              })
              break
            case 'reload':
              __search__()
              break
          }
        })

        $('#gamelistbox').on('click', '.pear-btn', function () {
          const that = $($(this).context)
          const id = that.attr('data-id')
          // const letter = that.attr('data-letter')
          const name = that.text()
          sendMessage('click', {
            id,
            letter: LETTER,
            name,
          })
        })
      })
    </script>
  </body>
</html>
